<template>
  <u-popup :show="visible" :round="10" mode="bottom">
    <view class="integral-popup">
      <view class="ip-header">
        <text class="ip-title">积分抵现</text>
        <view class="ip-close" @click="close">
          <u-icon name="close"></u-icon>
        </view>
      </view>
      <view class="ip-body">
        <view class="space-between ip-tips">
          <view>
            <text>积分余额：</text>
            <text class="b-red">{{ integral }}</text>
          </view>
          <text class="b-red">{{ rule.consume }}积分={{ rule.deduction }}元</text>
        </view>
        <view class="">
          <u-radio-group v-model="checked" placement="column" size="18px" icon-size="14px">
            <view class="space-between first ip-item" @click="onSelect('no')">
              <text>暂不使用积分</text>
              <u-radio name="no"></u-radio>
            </view>
            <view class="space-between ip-item" @click="onSelect('yes')">
              <view>
                <text>抵扣</text>
                <text class="b-red">¥{{ formatMoney(deductionAmount) }}</text>
                <text>（最高可使用{{ usedIntegral }}积分）</text>
              </view>
              <u-radio name="yes"></u-radio>
            </view>
          </u-radio-group>
        </view>
      </view>
      <view class="ip-footer">
        <u-button type="primary" text="确定" @click="onConfirm"></u-button>
      </view>
    </view>
  </u-popup>
</template>

<script>
  import { formatMoney } from '@/common/utils'
  
  export default {
    props: {
      visible: {
        type: Boolean,
        default: false
      },
      // 可用积分
      integral: {
        type: [String, Number],
        default: ''
      },
      // 最多抵扣金额（订单金额）
      max: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        checked: 'no',
        
        // 规则
        rule: {
          // 消费积分数
          consume: '',
          // 抵扣金额
          deduction: '',
        },
      }
    },
    computed: {
      // 使用积分
      usedIntegral() {
        // 最多消费积分
        const maxConsumeIntegral = this.integral - this.integral % this.rule.consume
        // 订单金额可消费积分
        const orderConsumeIntegral = Math.ceil(this.max / this.rule.deduction) *  this.rule.consume
        // 实际消费积分
        return maxConsumeIntegral > orderConsumeIntegral ? orderConsumeIntegral : maxConsumeIntegral
      },
      // 抵扣金额
      deductionAmount() {
        // 积分抵扣的金额
        const reductionAmount = this.usedIntegral / this.rule.consume * this.rule.deduction
        // 实际抵扣金额最大为订单金额
        return this.max > reductionAmount ? reductionAmount : Math.ceil(this.max)
      },
    },
    methods: {
      onConfirm() {
        const usedIntegral = this.checked === 'yes' ? this.usedIntegral : 0
        const deductionAmount = this.checked === 'yes' ? this.deductionAmount : 0
        this.$emit('confirm', { usedIntegral, deductionAmount })
        this.close()
      },
      
      // 获取积分规则
      async getRule() {
        const { datas } = await this.$request({
          url: '/marketing-center/integralRule/queryAvailableConsumeRule'
        })
        this.rule.consume = datas.consumeIntegral
        this.rule.deduction = datas.cashOffset
      },
      
      onSelect(name) {
        this.checked = name
      },
      
      reset() {
        this.checked = 'no'
      },
      
      async close () {
        this.$emit('update:visible', false)
        await this.$nextTick()
        this.reset()
      },
      
      formatMoney,
    },
    created() {
      this.getRule()
    }
  }
</script>

<style scoped lang="scss">
  $red: #F15757;
  .b-red {
    color: $red;
  }
  .space-between {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
  
  // 选择积分
  .integral-popup {
    .ip-header {
      height: 100rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      border-bottom: 1px solid rgba(0, 0, 0, 0.08);
      .ip-title {
        flex: 1;
        padding-left: 92rpx;
        text-align: center;
      }
      .ip-close {
        width: 32rpx;
        padding: 30rpx;
      }
    }
    .ip-body {
      padding: 0 32rpx;
      .ip-tips {
        padding: 30rpx 0;
      }
      .ip-item {
        padding: 40rpx 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        &.first {
          border: 0;
        }
      }
    }
    .ip-footer {
      padding: 30rpx 32rpx 0;
    }
  }
</style>
